<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="static/header.js" charset="utf-8"></script>
		<script src="static/js/jquery-1.8.2.min.js" charset="utf-8"></script>
	</head>

	<body>
		<form class="layui-form" action="">
			<div class="layui-form-item" style="margin-top: 20px;">
				<label class="layui-form-label">手机号</label>
				<div class="layui-input-inline" style="width: 300px;">
					<input type="text" name="phone" id="phone" value="18662696568" required lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
				</div>
				<!-- <button type="button" id="check" class="layui-btn layui-btn-primary">验证</button> -->
			</div>
			<div class="layui-form-item" id="name">
				<label class="layui-form-label">昵称</label>
				<div class="layui-input-inline">
					<input type="text" name="name" placeholder="请输入昵称" autocomplete="on" class="layui-input">
				</div>
				<!-- <div class="layui-form-mid layui-word-aux">输入手机号后自动填充已录入的昵称</div> -->
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即登录</button>
				</div>
			</div>
		</form>

		<script>
			$("#name").hide();
			layui.use('form', function() {
				var form = layui.form;

			  //自定义验证规则
			  form.verify({
				  phone: function(value){
					var reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
					if(value.length != 11 || !reg.test(value)){
					   return '手机号码格式不正确';
					}
				  },
				});
				
				console.log(111);
				//监听提交
				form.on('submit(formDemo)', function(data) {
					var dataJson = data.field;
					console.log(JSON.stringify(dataJson));
					$.ajax({
						type: "post",
						url: apiPath + "/user/login",
						async: false,
						data: dataJson,
						success: function(result) {
							console.log(result);
							if(result.code != 0){
								layer.msg("第一次使用，请输入昵称");
								$("#name").show();
							}else{
								sessionStorage.setItem('phone', dataJson.phone);
								sessionStorage.setItem('userId', result.data.userId);
								layer.msg('登录成功', {icon: 1,time:800},function(){
									var index = parent.layer.getFrameIndex(window.name);
									parent.layer.close(index);
								});
							}
						},
						error: function() {

						}
					});
					return false;
				});
			});
		</script>
	</body>

</html>